<template>
	<view class="page">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->

		<u--form labelPosition="left" :model="model" :rules="rules" ref="form1">
			<u-form-item label="行业类别" label-width="80" borderBottom @click="gongzhongisShow = true; hideKeyboard()"
				ref="item1">
				<u--input v-model="hangyeType" disabled disabledColor="#ffffff" placeholder="请选择行业类别"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="岗位标题" label-width="80" prop="userInfo.title" borderBottom ref="item1">
				<u--input v-model="model.userInfo.title" placeholder="请选择岗位名称" border="none"></u--input>
			</u-form-item>
			<u-form-item label="工作地点" label-width="80" prop="userInfo.address" borderBottom ref="item1">
				<u--input v-model="model.userInfo.address" placeholder="请输入工作地点或地图选择" border="none"></u--input>
				<!-- <u-button @click="chooseAddressClick">地图选择</u-button> -->
				<u-icon slot="right" @click="chooseAddressClick" name="map-fill"></u-icon>
			</u-form-item>

			<u-form-item v-if="isqujian==0" label="待遇工资" label-width="80" borderBottom ref="item1">
				<view style="display: flex;flex-direction: row;">
					<view style="display: flex;flex-direction: row;text-align: right;"
						@click="gudinggongziShow = true; hideKeyboard()">
						<u--input v-model="gudingxinzi" disabled disabledColor="#ffffff" placeholder="固定工资"
							suffixIcon="arrow-down" suffixIconStyle="color: #909399"></u--input>
						<!-- <u-icon slot="right" name="arrow-down"></u-icon> -->
					</view>
				</view>
			</u-form-item>
			<u-form-item v-if="isqujian==0" label="固定工资" label-width="80" borderBottom ref="item1">
				<view style="display: flex;flex-direction: row;">
					<view style="display: flex;flex-direction: row;">
						<u--input style="text-align: center;" v-model="model.userInfo.salaryMin"
							placeholder="请输入工资"></u--input>
					</view>
					<view style="display: flex;flex-direction: row;" @click="danweiShow = true; hideKeyboard()">
						<u--input v-model="danwei" disabled disabledColor="#ffffff" suffixIcon="arrow-down"
							suffixIconStyle="color: #909399"></u--input>
					</view>
				</view>
			</u-form-item>
			<u-form-item v-if="isqujian==1" label="待遇工资" label-width="80" prop="userInfo.gender" borderBottom
				ref="item1">
				<view style="display: flex;flex-direction: row;">
					<view style="display: flex;flex-direction: row;text-align: right;"
						@click="gudinggongziShow = true; hideKeyboard()">
						<u--input v-model="gudingxinzi" disabled disabledColor="#ffffff" placeholder="区间工资"
							suffixIcon="arrow-down" suffixIconStyle="color: #909399"></u--input>
						<!-- <u-icon name="arrow-down"></u-icon> -->
					</view>

				</view>
			</u-form-item>
			<u-form-item v-if="isqujian==1" label="区间工资" label-width="80" prop="userInfo.gender" borderBottom
				ref="item1">
				<view style="display: flex;flex-direction: row;">

					<view style="display: flex;flex-direction: row;" @click="show = true; hideKeyboard()">
						<u--input v-model="moeny" disabled disabledColor="#ffffff" placeholder="请选择"
							suffixIcon="arrow-down" suffixIconStyle="color: #909399"></u--input>
					</view>
					<!-- <view style="width: 300px;background-color: blue;"></view> -->
					<!-- <view style="width: 150px;background-color: blue;"></view> -->
					<!-- <u--input label-width="80" style="width: 30%;margin-right: 10px;"  v-model="userInfo.salaryMin"></u--input>-
					<u--input  label-width="150" style="width: 30%;margin-right: 10px;" v-model="userInfo.salaryMax"></u--input> -->
					<view style="display: flex;flex-direction: row;width: 100%;" @click="danweiShow = true; hideKeyboard()">
						<u--input v-model="danwei" disabled disabledColor="#ffffff" suffixIcon="arrow-down"
							suffixIconStyle="color: #909399"></u--input>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="岗位描述" label-width="80" prop="userInfo.workContent" borderBottom ref="item3">
				<u--textarea autoHeight :maxlength="-1" placeholder="请输入岗位描述"
					v-model="model.userInfo.workContent"></u--textarea>
			</u-form-item>
			<!-- <u-form-item label="福利待遇" label-width="80" borderBottom ref="item3">
				<view class="tag_container">
					<zyTag ref="zyAddTag" v-for="(item,index) in tagAddList" :text="item" addible />
					<view class="zy_tag_add">
					    <input :focus="focus" placeholder="+ New Tag" class="zy_tag_add_input"  v-model="addValue"
					        @confirm="confirm" />
					</view>
				</view>
			</u-form-item> -->
			<u-form-item label="结算方式" label-width="80" prop="userInfo.jiesuan" borderBottom
				@click="jiesuanShow = true; hideKeyboard()" ref="item1">
				<u--input v-model="jiesuan" disabled disabledColor="#ffffff" placeholder="请选择结算方式"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="报名方式" label-width="80" borderBottom @click="baomingShow = true; hideKeyboard()"
				ref="item1">
				<u--input v-model="fangshi" disabled disabledColor="#ffffff" placeholder="请选择报名方式"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="联系人" label-width="80" prop="userInfo.contractPeople" borderBottom ref="item1">
				<u--input v-model="model.userInfo.contractPeople" placeholder="请输入联系人姓名" border="none"></u--input>
			</u-form-item>
			<u-form-item label="联系电话" label-width="80" prop="userInfo.contractMobile" borderBottom ref="item1">
				<u--input v-model="model.userInfo.contractMobile" placeholder="请输入联系人电话" border="none"></u--input>
			</u-form-item>
		</u--form>

		<view class="commitBg">
			<button class="btn" @click="submit">提交</button>
		</view>
		<!-- <u-button class="submit" @click="submit" type="success">提交</u-button> -->
		<!-- <u-button style="margin-top:150px;background-color: yellow;" @click="submit">提交</u-button> -->


		<u-action-sheet :show="gudinggongziShow" :actions="gongzitype" title="请选择工资类别"
			@close="gudinggongziShow = false;genderClose()" @select="gudingSelect()">
		</u-action-sheet>
		<u-action-sheet :show="danweiShow" :actions="danweiunit" title="请选择工资单位"
			@close="danweiShow = false;genderClose()" @select="unitSelect()">
		</u-action-sheet>
		<u-action-sheet :show="baomingShow" :actions="actions" title="请选择报名方式"
			@close="baomingShow = false;genderClose()" @select="baomingSelect()">
		</u-action-sheet>
		<u-action-sheet :show="jiesuanShow" :actions="jiesuanType" title="请选择结算方式"
			@close="jiesuanShow = false;genderClose()" @select="jiesuanSelect()">
		</u-action-sheet>
		<u-datetime-picker :show="showBirthday" :value="birthday" mode="date" closeOnClickOverlay
			@confirm="birthdayConfirm" @cancel="birthdayClose" @close="birthdayClose"></u-datetime-picker>

		<u-picker :show="show" ref="uPicker" :columns="columns" @cancel="show=false" @confirm="confirm"
			@change="changeHandler"></u-picker>
		<u-picker :show="gongzhongisShow" ref="gongzhongPicker" :columns="gongzhongcolumns" @confirm="hangyeConfirm"
			@change="bindMultiPickerColumnChange" @cancel="gongzhongisShow = false"></u-picker>
	</view>

</template>

<script>
	import zyTag from '../../components/zy-tag/zy-tag.vue'
	import * as util from '../../common/util.js'
	var formatLocation = util.formatLocation;
	import permision from "@/common/permission.js"

	import uTabbar from "@/components/uTabbar/uTabbar.vue";
	import pop from "@/components/ming-pop/ming-cityindex.vue"
	import store from '@/common/store.js'
	import Index from '@/common/index-model.js'
	import fun from '@/common/publicFun.js'
	let index = new Index();
	let that = null;

	export default {
		components: {
			zyTag
		},
		data() {
			return {
				tagAddList: [],
				focus: false,
				addValue: '',
				tagScss: {
					fontSize: "",
					height: "",
				},
				hasLocation: false,
				location: {},
				isqujian: 0,
				columns: [],
				columnData: [],
				show: false,
				gongzhongcolumns: [0, 0, 0],
				gongzhongList: [],
				gongzhongdata: [],
				gongzhongisShow: false, // 是否显示工种选择

				gudinggongziShow: false, // 是否显示固定工资选择
				danweiShow: false, // 是否显示单位选择
				baomingShow: false, // 是否显示报名方式选择
				jiesuanShow: false, // 是否显示结算方式选择
				hangyeType: '',
				gudingxinzi: '固定工资',
				jiesuan: '日结',
				moeny: '',
				fangshi: '电话联系',
				danwei: '元/天',
				model: {
					userInfo: {
						type: 0,
						title: '',
						mapFlag: 0,
						address: '',
						lon: '',
						lat: '',
						workContent: '',
						welfares: '',
						contractMethod: 0,
						contractPeople: '',
						contractMobile: '',
						salaryUnit: 0,
						salaryMin: 0,
						salaryMax: 0,
						settlement: 0,
						skillLevel2: 0,
						skillLevel3: 0,
					}
				},
				actions: [{
						name: '电话联系',
					},
					{
						name: '资料报名',
					},
					{
						name: '电话或报名均可',
					}
				],
				gongzitype: [{
						name: '固定工资',
					},
					{
						name: '区间工资',
					}
				],
				danweiunit: [],
				jiesuanType: [],
				rules: {
					'userInfo.userName': {
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur', 'change']
					},
					'userInfo.intro': {
						type: 'string',
						required: true,
						message: '请填写简介',
						trigger: ['change']
					}
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			//添加标签input框回车事件
			confirm(e) {
				console.log('添加标签input框回车事件', e)
				this.tagAddList.push(e.detail.value)
				this.addValue = ''
			},
			async getLocation() {
				// #ifdef APP-PLUS
				let status = await this.checkPermission();
				if (status !== 1) {
					return;
				}
				// #endif
				// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ
				let status = await this.getSetting();
				if (status === 2) {
					this.showConfirm();
					return;
				}
				// #endif

				this.doGetLocation();
			},
			doGetLocation() {
				let that = this
				// #ifdef APP
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						// console.log('获取定位信息',res);
						getApp().globalData.lat = res.latitude;
						getApp().globalData.lng = res.longitude;
						// 创建地图坐标对象
						var point = new plus.maps.Point(res.longitude, res.latitude);
						//静态方法，反向地理编码
						plus.maps.Map.reverseGeocode(point, {}, (event) => {
								var address = event.address; // 转换后的地理位置
								var point = event.coord; // 转换后的坐标信息
								var coordType = event.coordType; // 转换后的坐标系类型
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								var addressList = address.match(reg).toString().split(",");
								//注意 因为存在直辖市， 当所在地区为普通省市时，addressList.length == 3，city = addressList[1];当所在地区为直辖市时addressList.length == 2，city = addressList[0];
								let city = addressList.length == 3 ? addressList[1] : addressList[0];
								console.log("addressList", event);
								console.log("address", event.address);
								that.title = event.address
								// 强制渲染页面
								that.$forceUpdate()
							},
							function(e) {
								console.log("失败回调", e);
							}
						);
					},
					fail: function(err) {
						console.log("获取定位失败", err);
						uni.showToast({
							title: '获取定位失败',
							icon: 'none'
						});
					}
				});
				// #endif
			},
			getSetting: function() {
				return new Promise((resolve, reject) => {
					uni.getSetting({
						success: (res) => {
							if (res.authSetting['scope.userLocation'] === undefined) {
								resolve(0);
								return;
							}
							if (res.authSetting['scope.userLocation']) {
								resolve(1);
							} else {
								resolve(2);
							}
						}
					});
				});
			},
			openSetting: function() {
				this.hideConfirm();
				uni.openSetting({
					success: (res) => {
						if (res.authSetting && res.authSetting['scope.userLocation']) {
							this.doGetLocation();
						}
					},
					fail: (err) => {}
				})
			},
			async checkPermission() {
				let status = permision.isIOS ? await permision.requestIOS('location') :
					await permision.requestAndroid('android.permission.ACCESS_FINE_LOCATION');

				if (status === null || status === 1) {
					status = 1;
				} else if (status === 2) {
					uni.showModal({
						content: "系统定位已关闭",
						confirmText: "确定",
						showCancel: false,
						success: function(res) {}
					})
				} else if (status.code) {
					uni.showModal({
						content: status.message
					})
				} else {
					uni.showModal({
						content: "需要定位权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}

				return status;
			},
			chooseAddressClick() {
				console.log('选择起始地点')
				uni.chooseLocation({
					success: (res) => {
						this.hasLocation = true,
							console.log('=res==', res)
						console.log('===', res.name)
						// this.location = formatLocation(res.longitude, res.latitude),
						this.model.userInfo.address = res.address
						this.model.userInfo.lat = res.latitude
						this.model.userInfo.lon = res.longitude
					}
				})
			},
			// 显示性别列表并校验性别是否为那女
			gudingSelect(e) {
				console.log('选择的工资方式是', e)
				this.isqujian = e.index
				this.gudingxinzi = e.name
				this.moeny = ""
			},
			unitSelect(e) {
				this.model.userInfo.salaryUnit = this.danweiunit[e.index].id
				console.log('选择的工资单位是', e)
				this.danwei = e.name
			},
			jiesuanSelect(e) {
				console.log('选择的结算方式是', e)
				this.model.userInfo.settlement = e.index
				this.jiesuan = e.name
			},
			baomingSelect(e) {
				console.log('选择的报名内容是', e)
				this.fangshi = e.name
				this.model.userInfo.contractMethod = e.index
			},
			// 性别选择关闭,校验是否选择性别
			genderClose() {
				// this.$refs.form1.validateField('userInfo.gender')
			},
			changeHandler(e) {
				console.log('监听变化', e)
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				let inter = []
				// if (index == 0) {
				// 	inter.push('面议')
				// } else {
				for (let i = index + 1; i < index + 50; i++) {
					inter.push(i * 100)
				}
				// }
				this.columnData[index] = inter

				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.model.userInfo.salaryMin = e.value[0]
				this.model.userInfo.salaryMax = e.value[1]
				this.moeny = e.value[0] + '~' + e.value[1]
				this.show = false
			},
			hangyeConfirm(e) {
				this.gongzhongisShow = false
			},
			//picker滑动改变时触发
			bindMultiPickerColumnChange(e) {
				console.log('监听变化', e)
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.gongzhongPicker
				} = e
				console.log('第几列：' + columnIndex + '，下标值为：' + index + '=====' + e.indexs)
				// this.model.userInfo.type = this.gongzhongList[index].id
				// this.hangyeType = value[0]

				let arr = []
				for (let k = 0; k < this.gongzhongList.length; k++) {
					arr[k] = this.gongzhongList[k].skillName
				}
				this.gongzhongcolumns[0] = arr
				console.log('行业类别1', arr)

				let arr1 = []
				for (let k = 0; k < this.gongzhongList[e.indexs[0]].children.length; k++) {
					arr1[k] = this.gongzhongList[e.indexs[0]].children[k].skillName
				}
				console.log('行业类别2', arr1)
				this.gongzhongcolumns[1] = arr1

				let arr2 = []
				for (let k = 0; k < this.gongzhongList[e.indexs[0]].children[e.indexs[1]].children.length; k++) {
					arr2[k] = this.gongzhongList[e.indexs[0]].children[e.indexs[1]].children[k].skillName
				}
				// this.hangyeType = e.value[0]+'/'+e.value[1]+'/'+e.value[2]
				console.log('行业类别3', this.hangyeType)
				this.gongzhongcolumns[2] = arr2
				this.model.userInfo.type = this.gongzhongList[e.indexs[0]].id
				this.model.userInfo.skillLevel2 = this.gongzhongList[e.indexs[0]].children[e.indexs[1]].id
				this.model.userInfo.skillLevel3 = this.gongzhongList[e.indexs[0]].children[e.indexs[1]].children[e.indexs[
					2]].id
				this.hangyeType = this.gongzhongList[e.indexs[0]].skillName + '/' + this.gongzhongList[e.indexs[0]]
					.children[e.indexs[1]].skillName + '/' + this.gongzhongList[e.indexs[0]].children[e.indexs[1]]
					.children[e.indexs[2]].skillName
			},
			//查询工种
			getQueryType() {
				let types = "construction"
				this.Qurylist = []
				index.getPublicMember({}, 'client/skills/listV2/' + types, 'get', res => {
					if (res.data.success && res.data.code == 200) {
						this.gongzhongList = res.data.result

						// this.gongzhongisShow=true
						let arr = []
						for (let k = 0; k < this.gongzhongList.length; k++) {
							arr[k] = this.gongzhongList[k].skillName
						}
						this.gongzhongcolumns[0] = arr
						console.log('行业类别1', arr)
						let arr1 = []
						for (let k = 0; k < this.gongzhongList[0].children.length; k++) {
							arr1[k] = this.gongzhongList[0].children[k].skillName
						}
						console.log('行业类别2', arr1)
						this.gongzhongcolumns[1] = arr1
						let arr2 = []
						for (let k = 0; k < this.gongzhongList[0].children[0].children.length; k++) {
							arr2[k] = this.gongzhongList[0].children[0].children[k].skillName
						}
						console.log('行业类别3', arr2)
						this.hangyeType = arr[0] + '/' + arr1[0] + '/' + arr2[0]
						this.gongzhongcolumns[2] = arr2
						this.model.userInfo.type = this.gongzhongList[0].id
						this.model.userInfo.skillLevel2 = this.gongzhongList[0].children[0].id
						this.model.userInfo.skillLevel3 = this.gongzhongList[0].children[0].children[0].id
					}
				})
			},
			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard()
			},

			submit() {
				console.log("提交信息:" + JSON.stringify(this.model.userInfo))
				if (this.model.userInfo.title == "") {
					uni.showToast({
						title: "请输入职位名称",
						icon: "none"
					})
					return
				}
				if (this.model.userInfo.workContent == "") {
					uni.showToast({
						title: "请输入职位描述",
						icon: "none"
					})
					return
				}
				if (this.model.userInfo.salaryMin == 0) {
					uni.showToast({
						title: "请输入工资",
						icon: "none"
					})
					return
				}
				if (this.model.userInfo.contractMobile == "") {
					uni.showToast({
						title: "请输入联系电话",
						icon: "none"
					})
					return
				}
				if (this.model.userInfo.contractPeople == "") {
					uni.showToast({
						title: "请输入联系人",
						icon: "none"
					})
					return
				}
				console.log("提交信息:" + JSON.stringify(this.model.userInfo))
				index.getPublicUserMember(this.model.userInfo, 'client/recuitjob/publish', 'post', res => {
					if (res.data.success && res.data.code == 200) {
						uni.showToast({
							title: '发布成功'
						})
						uni.navigateBack()
					}
				})
			},
			getUnitList() {
				index.getPublicMember({}, '/client/public/unit/of/money', 'get', res => {
					if (res.data.success && res.data.code == 200) {
						let data = res.data.result
						let arr = []
						for (let i = 0; i < res.data.result.length; i++) {
							arr.push({
								"name": res.data.result[i].unit
							})
						}
						console.log('工资单位', arr)
						this.danwei = data[3].name
						this.model.userInfo.salaryUnit = data[3].id
						this.danweiunit = arr
					}
				})
			},
			getjiesuanList() {
				index.getPublicMember({}, '/client/public/find/settlement', 'get', res => {
					if (res.data.success && res.data.code == 200) {
						let arr = []
						for (let i = 0; i < res.data.result.length; i++) {
							arr.push({
								"name": res.data.result[i].settlement
							})
						}
						this.jiesuanType = arr
					}
				})
			}

		},
		onLoad() {
			this.getLocation();
			// let arr = ['面议']
			let arr = []
			for (let k = 0; k < 50; k++) {
				arr[k] = k * 100
			}
			this.columns[0] = arr

			let inter = []
			for (let i = index + 1; i < index + 50; i++) {
				inter.push(i * 100)
			}
			this.columns[1] = inter
			console.log('columns\columns', this.columns)
		},

		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.form1.setRules(this.rules)
			this.getQueryType()
			this.getjiesuanList()
			this.getUnitList()
		}

	};
</script>

<style lang="scss">
	/* 白色 */
	$zy-classic-white: #ffffff;

	/* 灰色 */
	$zy-classic-grey: #e9e9e9;
	$zy-dark-grey: #999999;

	.container {
		width: 100%;
		height: 100vh;
		background-color: $zy-classic-white;
	}

	.text {
		padding: 20rpx 0 0 20rpx;
		font-size: 26rpx;
		color: $zy-dark-grey;
	}

	.tag_container {
		display: flex;
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.zy_tag_add {
		width: 150rpx;
		height: 50rpx; //medium：45rpx；small：40rpx；mini：35rpx
		padding: 5rpx 15rpx;
		margin: 5rpx 8rpx;
		border: 1rpx solid $zy-classic-grey;
		border-radius: 10rpx;
		text-align: center;
	}

	.zy_tag_add_input {
		margin: auto;
		width: 150rpx;
		height: 50rpx; //medium：45rpx；small：40rpx；mini：35rpx
		font-size: 28rpx; //medium：26rpx；small：24rpx；mini：22rpx
	}

	.page {
		margin: 15px;
		// background-color: gainsboro;
	}

	.commitBg {
		margin-top: 50px;
		border-radius: 8rpx;
		height: 45px;

		.btn {
			color: #fff;
			border-radius: 8rpx;
			background: #0575ff;
			font-size: 28rpx;
			height: 45px;
		}
	}
</style>